import React, { useState } from 'react';
import { Form, Input, Button, Checkbox, Card, Typography, message, Spin, Row, Col } from 'antd';
import { UserOutlined, LockOutlined, LoginOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { userApi } from '../api/user';
// import Logo from '../assets/images/logo.png';

const { Title, Text } = Typography;

const LoginPage: React.FC = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [loading, setLoading] = useState(false);

  const onFinish = async (values: { username: string; password: string; remember: boolean }) => {
    try {
      setLoading(true);
      const response = await userApi.login({
        username: values.username,
        password: values.password,
        remember: values.remember,
      });

      if (response.token) {
        // 保存token到localStorage
        localStorage.setItem('token', response.token);
        
        // 保存用户信息到Redux状态
        // 这里假设你有一个设置当前用户的action
        // dispatch(setCurrentUser(response.user));
        
        message.success('登录成功');
        navigate('/dashboard');
      }
    } catch (error) {
      console.error('登录失败:', error);
      message.error('用户名或密码错误，请重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ 
      height: '100vh', 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center',
      background: '#f0f2f5',
      backgroundImage: 'url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg)',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center 110px',
      backgroundSize: '100%',
    }}>
      <Spin spinning={loading}>
        <Card
          style={{ 
            width: 400, 
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
            borderRadius: '8px'
          }}
          bordered={false}
        >
          <div style={{ textAlign: 'center', marginBottom: 30 }}>
            {/* <img 
              src={Logo} 
              alt="知识库系统"
              style={{ height: 60, marginBottom: 16 }}
            /> */}
            <Title level={3} style={{ marginBottom: 8 }}>企业智能知识库</Title>
            <Text type="secondary">请登录您的账户</Text>
          </div>

          <Form
            name="login_form"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            size="large"
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入用户名!' }]}
            >
              <Input prefix={<UserOutlined />} placeholder="用户名" />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input.Password prefix={<LockOutlined />} placeholder="密码" />
            </Form.Item>

            <Form.Item>
              <Row justify="space-between">
                <Col>
                  <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox>记住我</Checkbox>
                  </Form.Item>
                </Col>
                <Col>
                  <a href="#forgot">忘记密码?</a>
                </Col>
              </Row>
            </Form.Item>

            <Form.Item>
              <Button 
                type="primary" 
                htmlType="submit" 
                style={{ width: '100%' }}
                icon={<LoginOutlined />}
                loading={loading}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
          
          <div style={{ textAlign: 'center' }}>
            <Text type="secondary">还没有账号？ <a href="#register">立即注册</a></Text>
          </div>
        </Card>
      </Spin>
    </div>
  );
};

export default LoginPage; 